<script setup>
import VueChart from "@/components/VueChart.vue";
import * as echarts from "echarts";
import { ref, reactive, watchEffect, onMounted } from "vue";

// 图表数据配置
const chartData = reactive({
  xAxis: ["1月", "2月", "3月", "4月", "5月", "6月"], // x轴刻度值
  series: {
    plan: [120, 132, 101, 134, 90, 230], // 计划完成投资数据
    actual: [100, 120, 90, 125, 85, 200], // 实际完成投资数据
  },
});

// 模拟异步数据加载
onMounted(() => {
  chartData.xAxis = ["1月", "2月", "3月", "4月"];
  chartData.series.plan = [100, 120, 90, 110];
  chartData.series.actual = [90, 100, 85, 95];
});

// 颜色配置
const colors = {
  plan: {
    main: "#188df0", // 计划投资主色
    light: "#83bff6", // 计划投资亮色（用于渐变）
    dark: "#1a98f8", // 计划投资暗色（用于底部圆片）
  },
  actual: {
    main: "#eb7b55", // 实际投资主色
    light: "#ffa183", // 实际投资亮色（用于渐变）
    dark: "#eb977c", // 实际投资暗色（用于底部圆片）
  },
};

// 渐变色配置
const gradients = {
  blue: [
    { offset: 0, color: colors.plan.light }, // 渐变起始色
    { offset: 0.5, color: colors.plan.main }, // 渐变中间色
    { offset: 1, color: colors.plan.main }, // 渐变结束色
  ],
  orange: [
    { offset: 0, color: colors.actual.light }, // 渐变起始色
    { offset: 0.5, color: colors.actual.main }, // 渐变中间色
    { offset: 1, color: colors.actual.main }, // 渐变结束色
  ],
};

// 图表基础配置
const baseOptions = {
  backgroundColor: "transparent", // 图表背景色
  tooltip: {
    trigger: "axis", // 触发类型：坐标轴触发
    axisPointer: {
      type: "shadow", // 指示器类型：阴影
    },
  },
  legend: {
    data: [
      {
        name: "计划完成投资",
        icon: "rect", // 图例标记的图形：矩形
        itemStyle: {
          color: colors.plan.main, // 图例标记的颜色
        },
      },
      {
        name: "实际完成投资",
        icon: "rect",
        itemStyle: {
          color: colors.actual.main,
        },
      },
    ],
    textStyle: {
      color: "#fff", // 图例文字颜色
      fontSize: 14, // 图例文字大小
    },
    top: 10, // 图例距离顶部的距离
  },
  grid: {
    top: "15%", // 图表上边距
    right: "10%", // 图表右边距
    left: "10%", // 图表左边距
    bottom: "8%", // 图表下边距
  },
  xAxis: {
    type: "category", // 坐标轴类型：类目轴
    name: "（月）", // x轴单位
    nameLocation: "end", // 单位位置：轴末端
    nameGap: 5, // 单位与轴线的距离
    axisLine: {
      lineStyle: {
        color: "#fff", // x轴线条颜色
      },
    },
    axisLabel: {
      color: "#fff", // x轴刻度标签颜色
      fontSize: 14, // x轴刻度标签字号
    },
  },
  yAxis: {
    type: "value", // 坐标轴类型：数值轴
    name: "（万元）", // y轴单位
    nameLocation: "end", // 单位位置：轴末端
    nameGap: 35, // 单位与轴线的距离
    nameRotate: 0, // 单位旋转角度
    nameTextStyle: {
      color: "#fff", // 单位文字颜色
      fontSize: 14, // 单位文字大小
      align: "right", // 文字水平对齐方式
      padding: [5, 0, 0, 0], // 文字内边距 [上, 右, 下, 左]
      verticalAlign: "top", // 文字垂直对齐方式
    },
    axisLine: {
      show: true, // 显示坐标轴线
      lineStyle: {
        color: "#fff", // y轴线条颜色
      },
    },
    splitLine: {
      lineStyle: {
        type: "dashed", // 分隔线类型：虚线
        color: "rgba(255,255,255,0.2)", // 分隔线颜色
      },
    },
    axisLabel: {
      color: "#fff", // y轴刻度标签颜色
      fontSize: 14, // y轴刻度标签字号
    },
  },
};

/**
 * 获取柱状图的公共配置
 * @param {string} name - 系列名称
 * @param {string} color - 柱子颜色
 * @param {number[]} data - 系列数据
 * @param {number} zIndex - 图形层级
 * @param {boolean} isFirst - 是否是第一组柱子，默认为true
 * @returns {Object} 返回柱状图配置对象
 */
const getBarConfig = (name, color, data, zIndex, isFirst = true) => ({
  name, // 系列名称，用于图例和tooltip
  type: "bar", // 图形类型：柱状图
  barWidth: 20, // 柱子宽度
  barGap: "-100%", // 柱子间距，-100%使两组柱子重叠
  z: zIndex, // 控制图形层级
  animationDelay: 0, // 动画延迟时间，柱子主体优先显示
  itemStyle: {
    color: color, // 柱子颜色
    opacity: 0.8, // 透明度
  },
  data, // 系列数据
});

/**
 * 获取装饰圆片的公共配置
 * @param {string} name - 系列名称
 * @param {string} color - 圆片颜色
 * @param {number[]} data - 系列数据
 * @param {number} zIndex - 图形层级
 * @param {boolean} isBottom - 是否是底部圆片，true表示底部，false表示顶部
 * @returns {Object} 返回装饰圆片配置对象
 */
const getPictorialConfig = (name, color, data, zIndex, isBottom = true) => ({
  name, // 系列名称，用于图例和tooltip
  type: "pictorialBar", // 图形类型：象形柱图
  symbolSize: [20, 6], // 图形大小 [宽度, 高度]
  symbolOffset: [0, isBottom ? 3 : -2], // 图形偏移量 [水平, 垂直]，根据是否底部圆片调整垂直偏移
  z: zIndex, // 控制图形层级
  animationDelay: 300, // 动画延迟时间，圆片延迟显示
  symbolPosition: isBottom ? "start" : "end", // 图形位置，底部圆片在起始端，顶部圆片在末端
  barGap: "-100%", // 柱子间距，-100%使两组柱子重叠
  tooltip: { show: false }, // 不显示圆片的tooltip
  data, // 系列数据
  itemStyle: {
    color, // 圆片颜色
  },
});

// 图表实例配置
const options = ref({});

// 监听数据变化，更新图表配置
watchEffect(() => {
  options.value = {
    ...baseOptions,
    xAxis: {
      ...baseOptions.xAxis,
      data: chartData.xAxis,
    },
    animation: true,
    animationDuration: 1000,
    animationEasing: "cubicOut",
    series: [
      // 第一组柱子的主体
      getBarConfig("计划完成投资", colors.plan.main, chartData.series.plan, 10),
      // 第一组柱子的底部圆片
      getPictorialConfig(
        "计划完成投资",
        colors.plan.dark,
        chartData.series.plan,
        11,
        true
      ),
      // 第一组柱子的顶部圆片
      getPictorialConfig(
        "计划完成投资",
        colors.plan.main,
        chartData.series.plan,
        12,
        false
      ),
      // 第二组柱子的主体
      getBarConfig(
        "实际完成投资",
        colors.actual.main,
        chartData.series.actual,
        13
      ),
      // 第二组柱子的底部圆片
      getPictorialConfig(
        "实际完成投资",
        colors.actual.dark,
        chartData.series.actual,
        14,
        true
      ),
      // 第二组柱子的顶部圆片
      getPictorialConfig(
        "实际完成投资",
        colors.actual.main,
        chartData.series.actual,
        15,
        false
      ),
    ],
  };
});
</script>

<template>
  <div class="bar-3">
    <vue-chart :options="options" />
  </div>
</template>

<style lang="scss" scoped>
.bar-3 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); // 容器背景色
  border-radius: 4px; // 容器圆角
}
</style>
